﻿@{
    Layout = null;
}

<div>
    <table id="marbleTable" class="stripe row-border order-column" style="width: 100%">
        <thead>
            <th>Id</th>
            <th>Name</th>
            <th>Caption</th>
            <th>Type</th>
            <th>Description</th>
            <th>DefaultValue</th>
            <th>ScreenGroup</th>
            <th>Active</th>
            <th>UserLevel</th>
            <th>PosLevel</th>
            <th>LastUpdatedBy</th>
            <th>LastUpdatedDate</th>
        </thead>
        <tbody>
            @foreach (var item in ViewBag.GetSetting)
            {  
                <tr>
                    <td>
                        <lable class="fixedCol1">@(item.Id == 0 ? "" : item.Id) </lable>
                    </td>
                    <td>
                        <input class="fixedCol2" type="text" value="@item.Name" />
                    </td>
                    <td>
                        <input type="text" value="@item.Caption" />
                    </td>
                    <td>
                        <select name="TypeList" id="TypeList" >
                            @foreach (var dow in item.BasicDataTypes)
                            {
                                if (@item.Type == @dow.Value)
                                {
                                <option value="@dow.Value" selected>@dow.Value</option>
                                }
                                else
                                {
                                <option value="@dow.Value">@dow.Value</option>
                                }
                            }
                        </select>
                    </td>
                    <td>
                        <input type="text" value="@item.Description" />
                    </td>
                    <td>
                        <input type="text" value="@item.DefaultValue" />
                    </td>

                    <td>
                        <input type="text" value="@item.ScreenGroup" />
                    </td>
                    <td>
                        <input type="checkbox" @(item.Active ? "checked='checked'" : "")  value="@item.Active" />
                    </td>
                    <td>
                        <input type="checkbox" @(item.UserLevel ? "checked='checked'" : "") value="@item.UserLevel" />
                    </td>
                    <td>
                        <input type="checkbox" @(item.PosLevel ? "checked='checked'" : "")  value="@item.PosLevel" />
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedBy" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedDate" disabled/>
                    </td>
                </tr>  
            }
        </tbody>
    </table>

    <button class="btn btn-primary btn-md" role="button" onclick="SaveSettings()">Save</button>
    <button class="btn btn-primary btn-md" role="button" onclick="location.href='/'">Close</button>

</div>

<script>
    $(document).ready(function () {
        var table = $('#marbleTable').DataTable({
            scrollY: "400px",
            scrollX: true,
            scrollCollapse: true,
            editable: true,
            stateSave: true,
            // paging: true,
            bPaginate: false,
            bInfo: false,
            bFilter: false,
            bSort: false,
            "createdRow": function (row, data, index) {
                $('td', row).addClass('tblRow');
            },
            rowCallback: function (row, data) {
                var element = $('td', row);
                element.on("change", function (e) {
                    UpdatedList($(this).parent().index());
                });
            },
            //order: [[ 0, "desc" ]],
            fixedColumns: {
                leftColumns: 2
            }
        });
        var counter = 1;

        $(".tblRow").on("change", function (e) { UpdatedList($(this).parent().index()); });
    });
    function SaveSettings() {
        
        $('#loading').show();
        var items = [];
        var table = document.getElementById('marbleTable');
        var fixedcolumn1 = $('.DTFC_Cloned lable.fixedCol1');
        var fixedcolumn2 = $('.DTFC_Cloned input.fixedCol2');

        for (var r = 0, n = table.rows.length; r < n; r++) {
            if (updatedArray.includes(r)) {
                var rowIndex = r + 1;
                items.push({
                    Id: fixedcolumn1[r].innerHTML,
                    Name: fixedcolumn2[r].value,
                    Caption: table.rows[rowIndex].cells[2].children[0].value,
                    Type: table.rows[rowIndex].cells[3].children[0].value,
                    Description: table.rows[rowIndex].cells[4].children[0].value,
                    DefaultValue: table.rows[rowIndex].cells[5].children[0].value,
                    ScreenGroup: table.rows[rowIndex].cells[6].children[0].value,
                    Active: table.rows[rowIndex].cells[7].children[0].checked,
                    UserLevel: table.rows[rowIndex].cells[8].children[0].checked,
                    PosLevel: table.rows[rowIndex].cells[9].children[0].checked,
                    LastUpdatedBy: table.rows[rowIndex].cells[10].children[0].value,
                    LastUpdatedDate: table.rows[rowIndex].cells[11].children[0].value,
                });
            }
        }

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("UpdateSettings", "SiteSetup")',
            data: JSON.stringify({ settings: items }),
            dataType: "json",
            success: function (data) {
                alert('Data Saved');
                location.reload();
            },
            error: function (e) {
                $('#loading').hide();
                alert(e);
            }
        });
    }
    var updatedArray = [];
    function UpdatedList(index) {
        
        if (!updatedArray.includes(index)) {
            updatedArray.push(index);
        }
    }

</script>
<style>
    .takea {
        display: block;
        height: 500px;
        overflow-y: auto;
    }

    .not-hide {
        position: absolute;
        left: 291px;
    }

    .wid {
        left: 301px;
    }

    .vaaa {
        position: static;
        width: 33px;
    }

    .ccc {
        position: static;
    }
</style>